<template>
  <view class="container">
	<view class="hotel-title">
	    <wd-icon name="thin-arrow-left" size="18px" @click="pageBack"></wd-icon>
	    <view class="hotel-name">房间详情</view>
	    <view style="width: 50rpx;"></view>
	</view>
    <!-- 轮播图 -->
      <wd-swiper :list="rooms.pictures" autoplay v-model:current="current" @click="() => previewImage(rooms.pictures,current)"></wd-swiper>

    <!-- 房型基本信息 -->
    <view class="room-title">{{rooms.name}}</view>
	<view class="room-bedType room-detail"><span v-for="(tag,index) in rooms.bedType.split(',')" :key="index">{{tag.split("-")[0]}}张{{ getbad(tag) }} &nbsp;·&nbsp; </span> {{ rooms.liveNumber }} 人入住 &nbsp;·&nbsp; {{ rooms.area }} m²</view>
    <!-- <view class="room-subtitle">可住{{ rooms.liveNumber}}人 · {{ rooms.area }} m²</view> -->
    <view class="room-desc">{{rooms.houseDescribe}}</view> 

    <!-- 房间标签 -->
    <view class="tag-container"> 
		<text v-for="(tag, index) in rooms.houseTags" :key="index" class="tag">{{ gettags(tag.code) }}</text> 
    </view>

	<view class="room-content">
		<!-- 早餐服务 -->
		<view class="section">
		  <view class="section-title">🍽 早餐服务</view>
		  <view v-if="rooms.isBreakfast" class="section-content">{{ rooms.isBreakfast }}份早餐</view>
		  <view v-else class="section-content">无早餐</view>
		</view>
		
		<view v-if="isExpanded">
		<!-- 入住政策 -->
		<view class="section">
		  <view class="section-title">🛏 入住政策</view>
		  <view class="section-content">
			<view style="margin-top: 20rpx;">· 入住时间：{{ rooms.checkInTime }}</view>
			<view style="margin-top: 20rpx;">· 预定说明：</view>
			<view class="">{{rooms.reserveExplain}}</view>
			<view style="margin-top: 20rpx;">· 取消政策：</view>
			<view class="">{{rooms.checkOutPolicy}}</view>
			
		  </view>
		</view>
		<!-- 设施服务 -->
		<view class="section">
		  <view class="section-title">🧰 设施服务</view> 
		  <view class="sectiontag-container"> 
		  	<text v-for="(tag, index) in rooms.facilityTags" :key="index" class="sectiontag">{{ getfacility(tag.code) }}</text> 
		  </view> 
		</view> 
		</view> 
		<!-- 展开/收起按钮 -->
		<view class="toggle-button" @click="toggleExpand">
		  {{ isExpanded ? "收起全部 ▲" : "展开全部 ▼" }}
		</view>
	</view> 
	
	
  </view>
  <!-- 预定按钮 -->
	<view class="btn-bottom-container">
	  <view class="top-container flex ">
	    <view class="price">￥  {{roominfo.mixPrice}}</view>
	    <view class="btn" @click="gotoOrder(rooms)">去预定</view> 
	  </view>
	  <view class="safe-content" :style="{height: safeInsert + 'px'}"></view>
	</view>
</template>


<script setup>
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app"; 
import {commonWordList} from "@/api/system";
import { useImagePreview } from '@/hook/useImagePreview'
import datepicker from "@/components/DatePicker/date-picker.vue";
import RoomCards from "@/hotelHomestay/components/RoomCard.vue";
import {roomDetail,hotelPrice} from "@/hotelHomestay/api/hotelHomestay";
import useHotelStore from '@/store/hotel';
const { previewImage } = useImagePreview()
const hotelStore = useHotelStore();
const pageBack = () =>{
  uni.navigateBack()
}   
const current = ref(0)
const rooms = ref({});
   
const safeInsert = ref(0);
const badData = ref([])
const tagData = ref([])
const facilityData = ref([])
const queryCommonWordList = async () => {
	await commonWordList({keys:"HOTEL_HOUSE_TYPE_TAG"}).then(res => { 
		tagData.value = res.result.HOTEL_HOUSE_TYPE_TAG 
	});
	await commonWordList({keys:"HOTEL_HOUSE_BED_TYPE"}).then(res => { 
		badData.value = res.result.HOTEL_HOUSE_BED_TYPE 
	}); 
	await commonWordList({keys:"HOTEL_HOUSE_FACILITY"}).then(res => { 
		facilityData.value = res.result.HOTEL_HOUSE_FACILITY 
	}); 
};  
const getbad = (val)=>{
	const num = val.split("-")[1];
	return badData.value.find(item => item.code == num)?.name || '';
} 
const gettags = (val)=>{ 
	return tagData.value.find(item => item.code == val)?.name || '';
}
const getfacility = (val)=>{ 
	return facilityData.value.find(item => item.code == val)?.name || '';
}

// 控制展开/收起
const isExpanded = ref(true);
const toggleExpand = () => {
	isExpanded.value = !isExpanded.value;
};

const gotoOrder =(room)=>{  
  const data = {
	  id:room.id,
	  checkInTime:hotelStore.beginDate,
	  checkOutTime:hotelStore.endDate
  }
  hotelPrice(data).then(res=>{ 
	  rooms.hotelname = room.name
	  room.livePrice = res.result
	  const yudingDataJson = JSON.stringify(room); 
	  const encodedYudingData = encodeURIComponent(yudingDataJson); 
	  uni.navigateTo({
		url:`/hotelHomestay/pages/Order/index?roomData=${encodedYudingData}`
	  });
  })
}
const getRoomDatil = (id) => {
  roomDetail(id).then(res=>{  
	rooms.value = res.result 
    rooms.value.pictures = rooms.value.pictures.map(item => item.imgUrl)
  })
} 
const roominfo = ref({})
onLoad((options) => { 
    safeInsert.value = uni.getSystemInfoSync().safeAreaInsets.bottom
	queryCommonWordList()
	if (options.roomData) { 
		roominfo.value = JSON.parse(decodeURIComponent(options.roomData)); 
		getRoomDatil(roominfo.value.id) 
	}
})
</script>

<style lang="scss" scoped>
.container {
	padding:0 20rpx;
	min-height: 130vh;
	background: linear-gradient(to bottom, #A7C6AC 0%, #EEEFE7 15%);
}

.hotel-title{ 
	height: 62rpx;
	display: flex;
	padding:13.5% 0 30rpx 0rpx;
	align-items: center;
}

.hotel-name{
	width: 90%;
	height: 100%;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 33rpx;
	color: #2B2B24;
	text-align: center;
	line-height: 60rpx;
}
.room-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 20rpx;
}

.room-bedType{
	display: flex;
	flex-wrap: wrap;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 22rpx;
	color: #2B2B24;
	margin: 5rpx 0 0 0 ; 
}
.room-detail{
	width: 100%;
	margin: 10rpx 0;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 22rpx;
	color: #2B2B24;
}
.room-subtitle {
  /* color: #888; */
  font-size: 24rpx;
  margin: 20rpx 0;
}
.room-desc {
  font-size: 24rpx;
  line-height: 40rpx;
  margin-bottom: 20rpx;
}
.tag-container { 
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx; 
}
.tag {
	font-size: 18rpx; 
	min-width: 80rpx;
	text-align: center;
	border: 1rpx solid #1B9C61;
	padding: 2rpx 10rpx;
	border-radius: 4rpx; 
	
}
.room-content{
	background-color: #fff;
	padding:0 20rpx;
	margin: 20rpx 0 200rpx 0;
	border-radius: 10rpx;
}
.section { 
	padding: 30rpx 0;
	border-bottom: 1rpx solid #c1c1c1;
}
.section-title {
  font-size: 28rpx;
  /* font-weight: 600; */
  margin-bottom: 10rpx;
}
.section-content {
  font-size: 24rpx;
  line-height: 40rpx;
  padding: 0 0 0 40rpx;
} 
.sectiontag-container { 
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 0 0 40rpx;
	gap: 10rpx; 
}
.sectiontag {
	font-size: 24rpx; 
	min-width: 80rpx;
	text-align: center;   
}
.toggle-button {
  text-align: center; 
  font-family: PingFang SC;
  /* font-weight: bold; */
  font-size: 24rpx; 
  color: #1b9c61;
  padding: 20rpx 0;
  cursor: pointer;
}
.btn-bottom-container {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  background: #fdffeb;
  .top-container {
    justify-content: space-between;
    align-items: center;
    padding:20rpx 30rpx 0 30rpx;
    .price {
      font-size: 42rpx;
      font-weight: bold;
      color: #AA5413;
    } 
	.btn {
		border-radius: 10.5rpx;
		font-weight: bold;
		padding: 25rpx 32rpx;
		color: #FDFFEB;
		background: #1B9C61;
	} 
  }
}
</style>
